<template>
    <a-layout-sider breakpoint="lg" collapsible :theme="themes" class="shadow-lg">
        <div class="logo" />
        {{ inline }}
        <Menus :model="inline" ref="Menus" />
    </a-layout-sider>
</template>
<script>
import Menus from "./menu.vue";
import Emitt from '@/utils/mitt'
export default {
    components: { Menus },
    data() {
        return {
            inline: 'inline',
            themes: 'dark'
        };
    },
    created() {
        Emitt.on('settings', (val) => {
            this.themes = val.navTheme
        });
    },
    mounted() {
        const setting = JSON.parse(localStorage.getItem('themes'))
        if (setting) {
            this.themes = setting.navTheme
        }
    }

}
</script>

<style>
.logo {
    height: 32px;
    background: rgba(255, 205, 255, 0.2);
    margin: 16px;
}
</style>